import { useEffect, useState } from 'react';
import { Button, Form, InputNumber } from 'antd';
import { useModel } from '@umijs/max'
import { 
  saveCityManager
} from './services'
import { useRequest } from 'ahooks';
import { Card } from '@/components/Card';
import OrgSelect from '@/components/OrgSelect';
import { getJumpParams } from '@/utils/common';

const RoleEditPage: React.FC<RoutePageProps> = (props) => {
  const [editForm] = Form.useForm()
  const [editable, setEditable] = useState(true)
  const { runAsync, loading } = useRequest(saveCityManager, {manual: true})
  const { closeCurrentTab } = useModel('global')

  const onFinish = (formValues: any) => {
    runAsync({
      orgId: formValues.org.id,
      oneYear: formValues.oneYear,
      twoYear: formValues.twoYear,
      thirdYear: formValues.thirdYear,
      fourYear: formValues.fourYear,
    })
    .then(() => {
      const event = new CustomEvent('refreshCityManagerList')
      window.dispatchEvent(event)
      closeCurrentTab('/station/cityMList')
    })
  }

  useEffect(() => {
    const params = getJumpParams()
    if (params) {
      editForm.setFieldsValue({
        org: {
          id: params.id,
          name: params.orgName,
        },
        oneYear: params.oneYear,
        twoYear: params.twoYear,
        thirdYear: params.thirdYear,
        fourYear: params.fourYear,
      })
      setEditable(!(params && params.id && params.id !== null))
    }
  }, [])
  
  return (
    <div className='container'>
      <Card>
        <Form form={editForm} name='editForm' labelCol={{flex: '120px'}} onFinish={onFinish}>
          <Form.Item name='org' label='经销商' rules={[{required: true, message: '请选择经销商'}]}>
            <OrgSelect style={{width: 320}}  disabled={!editable} allowClear />
          </Form.Item>
          <Form.Item label='第一年抽成比例' name='oneYear' rules={[{required: true, message: '请输入第一年抽成比例'}]}>
            <InputNumber placeholder='请输入0-100' controls={false} precision={2} min={0} max={100} style={{width: 320}} addonAfter='%' />
          </Form.Item>
          <Form.Item label='第二年抽成比例' name='twoYear' rules={[{required: true, message: '请输入第二年抽成比例'}]}>
            <InputNumber placeholder='请输入0-100' controls={false} precision={2} min={0} max={100} style={{width: 320}} addonAfter='%' />
          </Form.Item>
          <Form.Item label='第三年抽成比例' name='thirdYear' rules={[{required: true, message: '请输入第三年抽成比例'}]}>
            <InputNumber placeholder='请输入0-100' controls={false} precision={2} min={0} max={100} style={{width: 320}} addonAfter='%' />
          </Form.Item>
          <Form.Item label='第四年抽成比例' name='fourYear' rules={[{required: true, message: '请输入第四年抽成比例'}]}>
            <InputNumber placeholder='请输入0-100' controls={false} precision={2} min={0} max={100} style={{width: 320}} addonAfter='%' />
          </Form.Item>
          <Form.Item label=' ' colon={false}>
            <Button type='primary' htmlType='submit' loading={loading}>提交</Button>
          </Form.Item>
        </Form>
      </Card>
    </div>
  );
};

export default RoleEditPage;
